<script setup lang="ts">
import type { TabItem } from './interface'

interface Props {
    modelValue: string | number
    tabs: TabItem[]
}

withDefaults(defineProps<Props>(), {
  modelValue: '',
  tabs: () => []
})

const emits = defineEmits(['update:modelValue', 'change'])

const selectHandler = (item: TabItem) => {
  emits('update:modelValue', item.value)
  emits('change', item.value)
}

</script>
<template>
  <div class="flex items-center gap-3">
    <!-- 选项 -->
    <div v-for="(item, index) in tabs" :key="index" class="py-2 px-4 rounded-md select-none text-sm font-bold flex items-center cursor-pointer whitespace-nowrap" :class="[{'bg-primary/10': modelValue === item.value}]" @click="selectHandler(item)">
      <Icon :name="item.icon" /> <span class="ml-2">{{ item.label }}</span>
    </div>
  </div>
</template>
